大綱

• 文字區塊 (textarea) 與下拉選單 (select)

接續表單的部分來講，React 對 <textarea/> 和 <select/> 的使用介面做了些調整，目的是要提高一致性，來使得在操作上更為方便。

<textarea/> 的用法變得更接近 <input/>，並且允許我們在實作時可以指定 value 和 defaultValue。

//不受控
<textarea defaultValue='MAN WITH A MISSION' />
//受控
<textarea value={this.state.helloTo} onChang={this.handleChang} />

<select/> 的用法現在可以接受 value 和 defaultValue 來設定選擇哪些選項。這樣的好處是使其值的操作更佳的容易。

//不受控
<select defaultValue='B'>
  <option value='A'>第一個選項</option>
  <option value='B'>第二個選項</option>
  <option value='C'>第三個選項</option>
</select>
//受控
<select value={this.state.helloTo} onChang={this.handleChang}>
  <option value='A'>第一個選項</option>
  <option value='B'>第二個選項</option>
  <option value='C'>第三個選項</option>
</select>

React 支持多選。哪為了要能使用多選，我們就必須向 value 和 defaultValue 傳送一個陣列，才能達到這個需求。

//不受控
<select multiple='true' defaultValue={['A', 'B']}>
  <option value='A'>第一個選項</option>
  <option value='B'>第二個選項</option>
  <option value='C'>第三個選項</option>
</select>

最後要注意的是，當我們使用多選時，選擇了一些選項之後，下拉選單元件的值並不會更新。只有選項的 selected 屬性改變了。這個時候使用一個給定的 ref 或者 synthecticEvent.target，我們就可以用來存取選項並且來檢查它們是否被選中。